<template>
	<view>
		<u-tabs :list="list2" lineWidth="50" lineColor="#27ba9b" style="background: #fff;" :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)'
      }" itemStyle="padding-left: 18px; padding-right: 15px; height: 102rpx;" @change="handleTabChange">
		</u-tabs>
		<!-- 根据选项卡索引动态显示对应的内容 -->
		<view v-if="activeTabIndex === 0">
			<view class="card">
				<view class="status">
					<text class="date">2024-01-06 13:46:01</text>
					<text>待收货</text>
				</view>
				<navigator class="goods">
					<view class="cover">
						<image src="/static/logo.png" mode=""></image>
					</view>
					<view class="meta">
						<view class="name ellipsis">
							云音乐定制IN系列intar民谣木吉他
						</view>
						<view class="type">
							修身款（不可触屏）-黑色-L
						</view>
					</view>
				</navigator>
				<view class="payment">
					<view class="quantity">
						<text>共1件商品</text>
					</view>
					<view class="sf">
						<text>实付</text>
					</view>
					<view class="amount">
						<text class="symbol">￥</text>
						<text>318</text>
					</view>
				</view>
				<view class="action">
					<navigator class="button secondary">
						再次购买
					</navigator>
					<view class="button primary" @click="dialogToggle('info')">
						确认收货
					</view>
					<!-- 提示窗示例 -->
					<uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" content="为保障您的权益，请收到货并确认无误后，再确认收货" @confirm="dialogConfirm"
							@close="dialogClose"></uni-popup-dialog>
					</uni-popup>
				</view>
			</view>
			<view class="card">
				<view class="status">
					<text class="date">2024-01-06 13:46:01</text>
					<text>待收货</text>
				</view>
				<navigator class="goods">
					<view class="cover">
						<image src="/static/logo.png" mode=""></image>
					</view>
					<view class="meta">
						<view class="name ellipsis">
							云音乐定制IN系列intar民谣木吉他
						</view>
						<view class="type">
							修身款（不可触屏）-黑色-L
						</view>
					</view>
				</navigator>
				<view class="payment">
					<view class="quantity">
						<text>共1件商品</text>
					</view>
					<view class="sf">
						<text>实付</text>
					</view>
					<view class="amount">
						<text class="symbol">￥</text>
						<text>318</text>
					</view>
				</view>
				<view class="action">
					<navigator class="button secondary">
						再次购买
					</navigator>
					<view class="button primary" @click="dialogToggle('info')">
						确认收货
					</view>
					<!-- 提示窗示例 -->
					<uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" content="为保障您的权益，请收到货并确认无误后，再确认收货" @confirm="dialogConfirm"
							@close="dialogClose"></uni-popup-dialog>
					</uni-popup>
				</view>
			</view>
			<view>
		</view>
		</view>
		<view v-if="activeTabIndex === 1">
			<view class="card">
				<view class="status">
					<text class="date">2024-01-06 13:46:01</text>
					<text>待收货</text>
				</view>
				<navigator class="goods">
					<view class="cover">
						<image src="/static/logo.png" mode=""></image>
					</view>
					<view class="meta">
						<view class="name ellipsis">
							云音乐定制IN系列intar民谣木吉他
						</view>
						<view class="type">
							修身款（不可触屏）-黑色-L
						</view>
					</view>
				</navigator>
				<view class="payment">
					<view class="quantity">
						<text>共1件商品</text>
					</view>
					<view class="sf">
						<text>实付</text>
					</view>
					<view class="amount">
						<text class="symbol">￥</text>
						<text>318</text>
					</view>
				</view>
				<view class="action">
					<view class="button primary" @click="dialogToggle('info')">
						确认收货
					</view>
					<!-- 提示窗示例 -->
					<uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" content="为保障您的权益，请收到货并确认无误后，再确认收货" @confirm="dialogConfirm"
							@close="dialogClose"></uni-popup-dialog>
					</uni-popup>
				</view>
			</view>
			<view>
			</view>
			<view class="card">
					<view class="status">
						<text class="date">2024-01-06 13:46:01</text>
						<text>待收货</text>
					</view>
					<navigator class="goods">
						<view class="cover">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="meta">
							<view class="name ellipsis">
								云音乐定制IN系列intar民谣木吉他
							</view>
							<view class="type">
								修身款（不可触屏）-黑色-L
							</view>
						</view>
					</navigator>
					<view class="payment">
						<view class="quantity">
							<text>共1件商品</text>
						</view>
						<view class="sf">
							<text>实付</text>
						</view>
						<view class="amount">
							<text class="symbol">￥</text>
							<text>318</text>
						</view>
					</view>
					<view class="action">
						<view class="button primary" @click="dialogToggle('info')">
							确认收货
						</view>
						<!-- 提示窗示例 -->
						<uni-popup ref="alertDialog" type="dialog">
							<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" content="为保障您的权益，请收到货并确认无误后，再确认收货" @confirm="dialogConfirm"
								@close="dialogClose"></uni-popup-dialog>
						</uni-popup>
					</view>
				</view>
				<view>
			</view>
		</view>			
		<view v-if="activeTabIndex === 2">
			<view class="card">
				<view class="status">
					<text class="date">2024-01-06 13:46:01</text>
					<text>待收货</text>
				</view>
				<navigator class="goods">
					<view class="cover">
						<image src="/static/logo.png" mode=""></image>
					</view>
					<view class="meta">
						<view class="name ellipsis">
							云音乐定制IN系列intar民谣木吉他
						</view>
						<view class="type">
							修身款（不可触屏）-黑色-L
						</view>
					</view>
				</navigator>
				<view class="payment">
					<view class="quantity">
						<text>共1件商品</text>
					</view>
					<view class="sf">
						<text>实付</text>
					</view>
					<view class="amount">
						<text class="symbol">￥</text>
						<text>318</text>
					</view>
				</view>
				<view class="action">
					<navigator class="button secondary">
						再次购买
					</navigator>
				</view>
			</view>
			<view>
			</view>
			<view class="card">
					<view class="status">
						<text class="date">2024-01-06 13:46:01</text>
						<text>待收货</text>
					</view>
					<navigator class="goods">
						<view class="cover">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="meta">
							<view class="name ellipsis">
								云音乐定制IN系列intar民谣木吉他
							</view>
							<view class="type">
								修身款（不可触屏）-黑色-L
							</view>
						</view>
					</navigator>
					<view class="payment">
						<view class="quantity">
							<text>共1件商品</text>
						</view>
						<view class="sf">
							<text>实付</text>
						</view>
						<view class="amount">
							<text class="symbol">￥</text>
							<text>318</text>
						</view>
					</view>
					<view class="action">
						<navigator class="button secondary">
							再次购买
						</navigator>
					</view>
				</view>
				<view>
			</view>
		</view>
		<view v-if="activeTabIndex === 3">
			<view class="card">
				<view class="status">
					<text class="date">2024-01-06 13:46:01</text>
					<text>待收货</text>
				</view>
				<navigator class="goods">
					<view class="cover">
						<image src="/static/logo.png" mode=""></image>
					</view>
					<view class="meta">
						<view class="name ellipsis">
							云音乐定制IN系列intar民谣木吉他
						</view>
						<view class="type">
							修身款（不可触屏）-黑色-L
						</view>
					</view>
				</navigator>
				<view class="payment">
					<view class="quantity">
						<text>共1件商品</text>
					</view>
					<view class="sf">
						<text>实付</text>
					</view>
					<view class="amount">
						<text class="symbol">￥</text>
						<text>318</text>
					</view>
				</view>
				<view class="action">
					<navigator class="button secondary">
						再次购买
					</navigator>
					<view class="button primary" @click="dialogToggle('info')">
						确认收货
					</view>
					<!-- 提示窗示例 -->
					<uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" content="为保障您的权益，请收到货并确认无误后，再确认收货" @confirm="dialogConfirm"
							@close="dialogClose"></uni-popup-dialog>
					</uni-popup>
				</view>
			</view>
			<view>
			</view>
			<view class="card">
					<view class="status">
						<text class="date">2024-01-06 13:46:01</text>
						<text>待收货</text>
					</view>
					<navigator class="goods">
						<view class="cover">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="meta">
							<view class="name ellipsis">
								云音乐定制IN系列intar民谣木吉他
							</view>
							<view class="type">
								修身款（不可触屏）-黑色-L
							</view>
						</view>
					</navigator>
					<view class="payment">
						<view class="quantity">
							<text>共1件商品</text>
						</view>
						<view class="sf">
							<text>实付</text>
						</view>
						<view class="amount">
							<text class="symbol">￥</text>
							<text>318</text>
						</view>
					</view>
					<view class="action">
						<navigator class="button secondary">
							再次购买
						</navigator>
						<view class="button primary" @click="dialogToggle('info')">
							确认收货
						</view>
						<!-- 提示窗示例 -->
						<uni-popup ref="alertDialog" type="dialog">
							<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" content="为保障您的权益，请收到货并确认无误后，再确认收货" 
							@confirm="dialogConfirm"
								@close="dialogClose"></uni-popup-dialog>
						</uni-popup>
					</view>
				</view>
				<view>
			</view>
		</view>
		<view v-if="activeTabIndex === 4">
			<view class="card">
				<view class="status">
					<text class="date">2024-01-06 13:46:01</text>
					<text>待收货</text>
				</view>
				<navigator class="goods">
					<view class="cover">
						<image src="/static/logo.png" mode=""></image>
					</view>
					<view class="meta">
						<view class="name ellipsis">
							云音乐定制IN系列intar民谣木吉他
						</view>
						<view class="type">
							修身款（不可触屏）-黑色-L
						</view>
					</view>
				</navigator>
				<view class="payment">
					<view class="quantity">
						<text>共1件商品</text>
					</view>
					<view class="sf">
						<text>实付</text>
					</view>
					<view class="amount">
						<text class="symbol">￥</text>
						<text>318</text>
					</view>
				</view>
				<view class="action">
					<navigator class="button secondary">
						再次购买
					</navigator>
				</view>
			</view>
			<view>
			</view>
			<view class="card">
					<view class="status">
						<text class="date">2024-01-06 13:46:01</text>
						<text>待收货</text>
					</view>
					<navigator class="goods">
						<view class="cover">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="meta">
							<view class="name ellipsis">
								云音乐定制IN系列intar民谣木吉他
							</view>
							<view class="type">
								修身款（不可触屏）-黑色-L
							</view>
						</view>
					</navigator>
					<view class="payment">
						<view class="quantity">
							<text>共1件商品</text>
						</view>
						<view class="sf">
							<text>实付</text>
						</view>
						<view class="amount">
							<text class="symbol">￥</text>
							<text>318</text>
						</view>
					</view>
					<view class="action">
						<navigator class="button secondary">
							再次购买
						</navigator>
					</view>
				</view>
				<view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
    const type = ref('center');
    const msgType = ref('success');
    const messageText = ref('这是一条成功提示');
    const value = ref('');
    const list2 = ref([
      { name: '全部' },
      { name: '代付款' },
      { name: '待发货' },
      { name: '待收货' },
      { name: '待评价' }
    ]);
    const activeTabIndex = ref(0); // 默认活动选项卡索引

    const handleTabChange = (item) => {
      // 在选项卡切换时更新活动选项卡索引
      activeTabIndex.value = item.index;
    };

    const dialogToggle = (type) => {
      msgType.value = type;
	  console.log(1);
      // this.$refs.alertDialog.open() // 在 Vue 3 中不再需要使用 this.$refs
    };

    const dialogClose = () => {
      console.log('点击关闭');
    };

    const dialogConfirm = () => {
      console.log('点击确认');
      messageText.value = `点击确认了 ${msgType.value} 窗口`;
      // this.showConfirmButton = false // 隐藏确认收货按钮
      // this.$refs.msgType.open()
    };
</script>

<style lang="scss">
	/* 在这里添加您的自定义样式 */
	.card {
		min-height: 3.125rem;
		padding: 0.625rem;
		margin: 0.625rem 0.625rem 0;
		border-radius: 0.3125rem;
		background-color: #fff;

		.status {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: .875rem;
			color: #999;
			margin-bottom: 0.46875rem;

			.date {
				color: #666;
				flex: 1;
			}
		}

		.goods {
			height: auto;
			width: auto;
			display: flex;
			cursor: pointer;
			box-sizing: border-box;
			margin-bottom: 0.625rem;

			.cover {
				width: 5.3125rem;
				height: 5.3125rem;
				margin-right: 0.625rem;
				border-radius: 0.3125rem;
				overflow: hidden;
				position: relative;

				image {
					width: 5.3125rem;
					height: 5.3125rem;
					vertical-align: middle;
				}
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.name {
					height: 2.5rem;
					font-size: .8125rem;
					color: #444;
				}

				.type {
					line-height: 1.8;
					padding: 0 0.46875rem;
					margin-top: 0.3125rem;
					font-size: .75rem;
					align-self: flex-start;
					border-radius: 0.125rem;
					color: #888;
					background-color: #f7f7f8;
				}
			}
		}

		.payment {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			line-height: 1;
			padding: 0.625rem 0;
			text-align: right;
			color: #999;
			font-size: .875rem;
			border-bottom: 0.03125rem solid #eee;

			.quantity {
				font-size: .75rem;
				margin-right: 0.5rem;
			}

			.amount {
				color: #444;
				margin-left: 0.1875rem;

				.symbol {
					font-size: .625rem;
				}
			}
		}

		.action {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-top: 0.625rem;

			.button {
				width: 5.625rem;
				height: 1.875rem;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 0.625rem;
				border-radius: 1.875rem;
				border: 0.03125rem solid #ccc;
				font-size: .8125rem;
				color: #444;
			}

			.secondary {
				color: #27ba9b;
				border-color: #27ba9b;
			}

			.primary {
				color: #fff;
				background-color: #27ba9b;
				border-color: #27ba9b;
			}

		}
	}
</style>